{extend name="base/base-account-layout"/}
{block name="linkCss"}
<link rel="stylesheet" href="__STATIC__/css/account/account.css">
<link rel="stylesheet" href="__STATIC__/css/account/account-address.css">
{/block}
{block name="breadcrumb"}
<a>商家管理中心</a>
<a>账户设置</a>
<a>寄回地址</a>
{/block}

{block name="main"}
<div class="main">
    <div class="pannel">
        <div class="pannel-title">
            <h2 class="ptr">寄回地址管理</h2>
        </div>
        <div class="pannel-content">
            <form action="" class="layui-form">
                <ul>
                    <li>
                        <div class="layui-form-item addr">
                            <label class="layui-form-label"><span class="req red">*</span>所在地区：</label>
                            <div class="layui-input-inline">
                                <select lay-ignore="" id="cmbProvince" name="cmbProvince" lay-verify="required">
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select  lay-ignore=""  id="cmbCity" name="cmbCity" lay-verify="required">
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select  lay-ignore=""  id="cmbArea" name="cmbArea" lay-verify="required">
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="req red">*</span>联系人：</label>
                            <div class="layui-input-block">
                                <textarea lay-verify="required" name="addr" placeholder="请输入内容" class="layui-textarea">甘化路176路之一</textarea>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">收货人姓名：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" placeholder="长度不超过25个字符"  required  lay-verify="required|username">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话 / 手机：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"  required  lay-verify="required|number" placeholder="联系电话 / 手机">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <button class="layui-btn layui-btn-normal" lay-submit>保存</button>
                            </label>
                        </div>
                    </li>
                </ul>
            </form>
        </div>
    </div>
    <div class="addr-list">
        <h5>已有<span class="red">1</span>条地址，还可添加<span class="red">19</span>条</h5>
        <table lay-skin="line" class="layui-table">
            <colgroup>
                <col width="150">
                <col width="300">
                <col width="400">
                <col width="150">
                <col width="230">
            </colgroup>
            <thead>
            <tr>
                <th>收货人</th>
                <th>所在地区</th>
                <th>详细地址</th>
                <th>电话 / 手机</th>
                <th lay-data="{toolbar: '#tool'}">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>贤心</td>
                <td>广东省 - 广州市 - 黄埔区</td>
                <td>护林路11223号状元谷电商产业园</td>
                <td>199838427724</td>
                <td>
                    <a class="nor" href="">修改</a>
                    <a class="nor del" href="javascript:void(0)">删除</a>
                    <a class="layui-btn layui-btn-danger" href="">默认地址</a>
                </td>
            </tr>
            <tr>
                <td>贤心</td>
                <td>广东省 - 广州市 - 黄埔区</td>
                <td>护林路11223号状元谷电商产业园</td>
                <td>199838427724</td>
                <td>
                    <a class="nor" href="">修改</a>
                    <a class="nor del" href="javascript:void(0)">删除</a>
                    <a class="layui-btn layui-btn-danger" href="">默认地址</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
{/block}

{block name="botScript"}
<script>
    layui.use(['form'], function(){
        var form = layui.form;
        //表单验证
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z\u4e00-\u9fa5\\s]+$").test(value)){
                    return '姓名不能有特殊字符';
                }else if(!/^[\S]{2,25}$/.test(value)){
                    return '姓名长度范围应在2到25之间';
                }
            }
        });
    });
    $('.del').on('click','',function () {
        var that = this;
        layerTips('alert','您确定要删除吗？',function () {
            $(that).parents('tr').remove();
            layer.closeAll();
        });
    })
</script>
{/block}